<template>
  <!-- 素材包管理 -->
  <div class="material-pack-list">
    <top-tab :list="tabList" :tabIndex.sync="tabIndex"/>

    <div class="content">
      <div class="list-title">
        <p>{{ tabName }}素材包：<span class="green-text">{{ list.length }}个</span></p>
        <p
          @click="toggleChooseAll" 
          class="choose-all" 
          :class="{'dis': chooseAll}">
          <span>{{ chooseAll ? '取消全选' : '全选'}}</span>
        </p>
      </div>
      <div class="list">
        <div class="item" 
          @click="itemClick(index, item.id)"
          v-for="(item, index) in list" 
          :key="index">
          <div 
            class="img-wrapper" 
            :style="{backgroundImage: 'url(' + item.cover_url + ')'}">
            <p class="choose-mask" v-if="item.hasChoose"><span>已选择</span></p>
          </div>
          <p class="name">{{ item.package_name }}</p>
        </div>
      </div>
    </div>

    <div class="bottom-guide">
      <div class="guide-left">
        已选择 <span class="blue-text">{{ choosedCount }}</span> 个素材包
      </div>
      <div 
        :class="{'dis': !choosedCount }"
        class="guide-right" 
        @click="authAll">一键授权</div>
    </div>
  </div>
</template>

<script>
import topTab from '@/components/top-tab.vue'
import { listPackageByTopic, updateMaterialType, listPackageByAccountId } from '@/api/account'
import { Toast } from 'vant'
export default {
  components: { topTab },
  data () {
    return {
      chooseAll: false, // 是否全选
      list: [
        {
          url: 'http://oss.dev.shijiayun.cn/cpms/image/c562219804784dd487f5994531b08309.jpg',
          name: '素材包名称',
          hasChoose: false,
        },
         {
          url: 'http://oss.dev.shijiayun.cn/cpms/image/c562219804784dd487f5994531b08309.jpg',
          name: '素材包名称',
          hasChoose: false,
        },
         {
          url: 'http://oss.dev.shijiayun.cn/cpms/image/c562219804784dd487f5994531b08309.jpg',
          name: '素材包名称',
          hasChoose: false,
        },
         {
          url: 'http://oss.dev.shijiayun.cn/cpms/image/c562219804784dd487f5994531b08309.jpg',
          name: '素材包名称',
          hasChoose: false,
        },
         {
          url: 'http://oss.dev.shijiayun.cn/cpms/image/c562219804784dd487f5994531b08309.jpg',
          name: '素材包名称',
          hasChoose: false,
        },
         {
          url: 'http://oss.dev.shijiayun.cn/cpms/image/c562219804784dd487f5994531b08309.jpg',
          name: '素材包名称',
          hasChoose: false,
        },
         {
          url: 'http://oss.dev.shijiayun.cn/cpms/image/c562219804784dd487f5994531b08309.jpg',
          name: '素材包名称',
          hasChoose: false,
        },
      ],
      tabList: ['产品', '人物', '场景'],
      tabIndex: 0,
      choosedCount: 0, 
      typeDict: {
        '产品': 'GOODS',
        '人物': 'PEOPLE',
        '场景': 'LOCATION'
      },
      choosedList: [],
    }
  },
  watch: {
    tabIndex (val) {
      this.getList()
    }
  },
  computed: {
    tabName () {
      return this.tabList[this.tabIndex]
    }
  },
  async mounted () {
    await this.getPackageList()
    this.getList()
  },
  methods: {
    getPackageList () {
      listPackageByAccountId({
        account_id: this.$route.query.account_id
      }).then(res => {
        console.log('已授权的素材包：', res)
        this.choosedList = res
        this.choosedCount = res.length
      })
    },
    getList () {
      listPackageByTopic({
        topic: this.typeDict[this.tabList[this.tabIndex * 1]]
      }).then(res => {
        this.list = res
        if (this.choosedList.length) {
          this.list.forEach(item => {
            if (this.choosedList.findIndex(i => i.id === item.id) > -1) {
              item.hasChoose = true
            }
          })
        }
        this.chooseAll = this.checkCurrentTypeIsAll()
      })
    },
    authAll () {
      if (!this.choosedList.length) {
        Toast('至少选择一个素材包')
        return
      }
      // 这里需要对接一键授权的接口
      updateMaterialType({
        account_id: this.$route.query.account_id,
        authorize_type_enum: 'PART_AUTHORIZE',
        package_ids: this.getIds(),
        status: 'AUDIT_PASS',
      }).then(res => {
        console.log('更新授权成功')
        this.$router.go(-1)
      })
    },
    getIds () {
      let arr = []
      this.choosedList.forEach(item => {
        arr.push(item.id)
      })
      return arr
    },
    toggleChooseAll () {
      const tempList = JSON.parse(JSON.stringify(this.list))
      tempList.forEach(item => {
        item.hasChoose = true
      })
      this.$set(this, 'list', tempList)
      this.chooseAll = !this.chooseAll
      if (this.chooseAll) {
        this.list.forEach(item => {
          item.hasChoose = true
          if (this.choosedList.findIndex(i => i.id === item.id) === -1) {
            this.choosedList.push(item)
          }
        })
      } else {
        this.list.forEach(item => {
          item.hasChoose = false
          const findedIndex = this.choosedList.findIndex(i => i.id === item.id)
          if (findedIndex > -1) {
            this.choosedList.splice(findedIndex, 1)
          }
        })
      }
      this.choosedCount = this.choosedList.length
      this.$forceUpdate()
    },
    checkCurrentTypeIsAll () {
      let isAll = true
      this.list.forEach(item => {
        if (this.choosedList.length) {
          if (this.choosedList.findIndex(i => i.id === item.id) === -1) {
            isAll = false
          }
        } else {
          isAll = false
        }
      })
      return isAll
    },
    itemClick (index, id) {
      const currentStatus = this.list[index].hasChoose
      if (currentStatus) {
        const findIndex = this.choosedList.findIndex(i => i.id === id)
        this.choosedList.splice(findIndex, 1)
      } else {
        const obj = this.list.find(i => i.id === id)
        this.choosedList.push(obj)
      }
      this.$set(this.list[index], 'hasChoose', !currentStatus)
      this.chooseAll = this.checkCurrentTypeIsAll()
      this.choosedCount = this.choosedList.length
    },
    getCount () {
      const choosedList = this.list.filter(item => item.hasChoose)
      return choosedList.length
    }
  }
}
</script>

<style scoped>

.guide-right {
  text-align: center;
  border-radius: 1.07vw;
  width: 22.67vw;
  height: 8vw;
  line-height: 8vw;
  background: linear-gradient(110deg, #006EDD 0%, #009CEC 41%, #00A5A5 100%);
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: 600;
  color: #FFFFFF;
}
.guide-right.dis {
  background: #ccc;
}
.bottom-guide {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  height: 17.6vw;
  padding: 0 5.33vw;
  background: #FFFFFF;
  border: 0.27vw solid #E6E6E6;
}
.blue-text {
  color: #006EDD;
}
.material-pack-list {
  padding-top: 21.33vw;
  padding-bottom: 38.93vw;
}
.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.choose-mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.3);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Source Sans Pro;
  font-size: 4.8vw;
  font-weight: 600;
  color: #FFFFFF;
  border-radius: 2.13vw;
}
.item {
  margin-bottom: 4.27vw;
}
.img-wrapper {
  position: relative;
  width: 36vw;
  height: 53.33vw;
  margin-bottom: 2.13vw;
  background-color: #000000;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 2.13vw;
}
.name {
  width: 36vw;
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: 600;
  line-height: 22px;
  color: #666666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.content {
  box-sizing: border-box;
  width: 89.6vw;
  box-sizing: border-box;
  padding: 3.73vw 5.33vw 0;
  background: #ffffff;
  margin: 0 auto;
  border-radius: 2.13vw;
}
.list-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5.87vw;
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: 600;
  line-height: 5.87vw;
  color: #3D3D3D;
}
.choose-all {
  /* width: 14.4vw; */
  padding: 0 3vw;
  height: 6.93vw;
  line-height: 6.93vw;
  background: #006EDD;
  text-align: center;
  border-radius: 1.07vw;
  font-family: Source Sans Pro;
  font-size: 3.2vw;
  font-weight: 600;
  color: #FFFFFF;
}
.choose-all.dis {
  background: #999;
}
.green-text {
  color: #00A5A6;
}
</style>